<template>
  <div>
    <div class="contanier border_top">
      <div class="nav flex align-center">
        <div
          v-for="(item, index) in navList"
          :key="index"
          class="flex align-center"
          :class="nav_act == index ? 'active' : ''"
          @click="navclcik(index, item.path)"
        >{{ item.text }}</div>
        <span class="morex">[查看更多]</span>
      </div>
      <div class="li_dynamic">
        <ul class="p-0 m-0">
          <li v-for="(tp,p) in imgList" :key="p">
            <img :src="tp.picurl" alt />
          </li>
          <!-- <li>
            <img src="../../../assets/img/ztbg2.png" alt />
          </li>
          <li>
            <img src="../../../assets/img/ztbg3.png" alt />
          </li>
          <li>
            <img src="../../../assets/img/ztbg4.png" alt />
          </li>
          <li>
            <img src="../../../assets/img/ztbg5.png" alt />
          </li>
          <li>
            <img src="../../../assets/img/ztbg6.png" alt />
          </li> -->
        </ul>
      </div>
    </div>
    <!-- <div style="margin-top:15px"> -->
    <!-- <Price></Price> -->
    <!-- </div> -->
  </div>
</template>
<script>
import Price from "./tradingPrice";
export default {
  data() {
    return {
      navList: [
        {
          path: "/",
          text: "专题报道",
        },
      ],
      nav_act: 0,
      
      imgList:[]
    };
  },
  components: {
    Price,
  },
  mounted(){
    this.getimgList()
  },
  methods: {
    navclcik(index, path) {
      this.nav_act = index;
    },
    getimgList() {
      this.$api
        .getZtList({})
        .then((res) => {
          this.imgList = res.data.data.list;
        })
        .catch((e) => {});
    },
  },
};
</script>

<style lang="stylus" scoped>
.contanier {
  width: 588px;
  height: 420px;
  background: #FFFFFF;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
}

.nav {
  position: relative;
}

.nav>div {
  height: 40px;
  font-size: 16px;
  font-weight: 400;
  color: #BF242A;
  padding: 0 20px;
  cursor: pointer;
}

.nav>div.active {
  color: #ffffff;
  border-color: #ffffff;
  background: #EB424C;
  // border-image: -webkit-linear-gradient(to right, #00036B, #409EFF) 30 30;
  // border-image: -moz-linear-gradient(to right, #00036B, #409EFF) 30 30;
  // border-image: linear-gradient(to right, #00036B, #409EFF) 30 30;
}

.morex {
  display: inline-block;
  font-size: 14px;
  color: #666666;
  position: absolute;
  right: 12px;
  cursor: pointer;
}

.li_dynamic {
  li {
    list-style: none;
    margin-top: 12px;
    float: left;
    margin-left: 10px;
  }
}
</style>